<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue起步-计算属性</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <!--
        模板内的表达式其实只适合于行内运算，过于复杂的话就比较难以理解了

    -->
    <div id="example">
        {{ message.split('').reverse().join('') }}
    </div>

    <!--
        计算属性的话，属性值其实是一个方法名称，类似于get方法，不过没有get前缀
        computed 的属性不能直接调用其方法
    -->

    <div id="app-1">
        <p>原始内容: "{{ message }}"</p>
        <p>计算反转后的内容: "{{ reversedMessage }}"</p>
        <!--
            这样的调用是不行的
            <p>直接调用方法: "{{ reversedMessage() }}"</p>

        -->
        <p>计算反转后的内容: "{{ reversedMessageMethod() }}"</p>
    </div>
    

    <!--
        计算属性的setter 和 getter
    -->
    <div id="app-2">{{fullname}} 和 {{fullname2}}</div>

    <!-- 基于watch监控属性值变更
        当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的
     -->
     <div id="watch-example">
        <p>
            问一个Yes/No 答案的问题:
            <input v-model="question">
        </p>
        <p>答案:{{ answer }}</p>
        <img :src="image" />
        <p>img url:{{image}}</p>
     </div>

</body>
<!-- Since there is already a rich ecosystem of ajax libraries    -->
<!-- and collections of general-purpose utility methods, Vue core -->
<!-- is able to remain small by not reinventing them. This also   -->
<!-- gives you the freedom to just use what you're familiar with. -->
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script>
    var app = new Vue({
        el: "#example",
        data: {
            message: "Hello Vue!"
        }
    })

    var app1 = new Vue({
        el : "#app-1",
        data:{
            message:"李日盛",
            accessCount : 0
        },
        computed: {
            reversedMessage:function(){
                // 这里可以直接访问本对象的变量message 
                // 计算属性石可以自己计算依赖的，本例是依赖于message。
                // 在message 没有发生变化的情况下面，计算属性的值是可以缓存的
                // 验证是否重新计算
                console.log(this.accessCount++)
                return this.message.split('').reverse().join('')
                /**
                我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A ，
                它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。
                如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代
                **/
            }
        },
        methods: {
            reversedMessageMethod:function(){
                console.log("reversedMessageMethod")
                return this.message.split('').reverse().join('')
            }
        }
    })

    // 打印计算属性
    console.log(app1.reversedMessage)
    // 更改message
    app1.message = "Good bye"
    console.log(app1.reversedMessage)

    var app2 = new Vue({
        el : "#app-2",
        data:{
            firstName:"Eason",
            lastName:"Lee"
        },
        // 定义计算属性
        computed:{
            fullname:function(){
                return this.firstName+ ' '+this.lastName
            },
            // 计算属性支持setter 和getter
            fullname2:{
                get:function(){
                    return this.firstName+ ' '+this.lastName
                },
                set:function(newValue){
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length -1]
                }
            }
        }
    })

    // 基于watch的实例
    var watch = new Vue({
        el:"#watch-example",
        data:{
            question:'',
            answer:'你先问个问题吧',
            image:'https://www.baidu.com/img/bd_logo1.png'
        },
        //监听输入
        watch:{
            // question 值发生改变的时候触发监控
            question:function(newQuestion){
                this.answer = '等待你的输入....'
                this.getAnswer()
            }
        },
        methods:{
            // _.debounce 是一个通过 lodash 限制操作频率的函数。
            // 在这个例子中，我们希望限制访问yesno.wtf/api的频率
            // ajax请求直到用户输入完毕才会发出
            // 学习更多关于 _.debounce function (and its cousin
            // _.throttle), 参考: https://lodash.com/docs#debounce
            getAnswer: _.debounce(
                function(){
                    //这里要处理用户输入
                    var vm = this
                    if(this.question.indexOf('？') === -1 && this.question.indexOf('?') === -1 ){
                        // 用户还没有打完
                        vm.answer = '问题通常以问号结尾，:-)'
                        return

                    }

                    vm.answer = '思考中....'
                    axios.get('https://yesno.wtf/api')
                      .then(function (response){
                          vm.answer = _.capitalize(response.data.answer)
                          vm.image = _.capitalize(response.data.image)
                      })
                      .catch(function (error){
                          vm.answer = '额，我们貌似遇到些小问题。。。'+error
                      })
                },
                // 这是我们为用户停止输入等待的毫秒数
                500
            )
        }
    })

</script>

</html>